import React from 'react'
// import { 
//   createStore,
//   bindActionCreators,
//  } from '../redux'

import {
  bindActionCreators,
} from '../redux'

import store from '../store'
import actionCreators1 from '../store/actionCreators/counter1'

// boundActionCreators { add1: () => dispatch({action: ADD1}), minus1: () => dispatch({action: MINUS1}) }
const boundActionCreators = bindActionCreators(actionCreators1, store.dispatch)

class Counter1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number: store.getState().counter1.number, // 把仓库状态的 counter1 作用域下的 counter1 状态取出
    }
  }
  componentDidMount() {
    // 当仓库的状态发生变化后 会自动执行订阅函数
    // 并返回一个取消订阅的函数
    this.unsubscribe = store.subscribe(() => { // 保存一个订阅函数
      // 当仓库状态发生变化时 执行 this.setState 函数更新组件的状态
      this.setState({
        number: store.getState().counter1.number, // 把仓库状态的 counter1 作用域下的 counter1 状态取出
      })
    })
  }

  // 当组件卸载的时候执行
  componentWillUnmount() {
    this.unsubscribe() // 取消订阅
  }
  render() {
    return <div>
      <p>{this.state.number}</p>
      <button onClick={boundActionCreators.add1}>+</button>
      <button onClick={boundActionCreators.minus1}>-</button>
    </div>
  }
}
export default Counter1
